<template>
  <div>
    <el-card class="box-card">
      <el-form ref="PdFleet" :model="PdFleet" label-width="80px" :inline="true">
        <el-form-item label="车队名称:" prop="name">
          <el-input type="text" placeholder="请输入司机名称" v-model="PdFleet.name"></el-input>
        </el-form-item>
        <el-form-item label="车队编号:" prop="id">
          <el-input type="text" placeholder="请输入司机名称" v-model="PdFleet.id"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="pageTruckDriver()" icon="el-icon-search" type="primary">查询</el-button>
          <el-button @click="reset('PdFleet')" icon="el-icon-refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-divider></el-divider>

    <el-card class="box-card">
      <el-button type="info" icon="el-icon-edit" @click="openAddFleet()">新增车队</el-button>
      <el-table v-loading="loading" :data="tableData" style="width: 100%">
        <el-table-column
          width="120"
          label="序号">
          <template slot-scope="scop">
            <!--            queryVo.pageNum 当前页
                        queryVo.pageSize 页大小-->
            {{ scop.$index + (pagenum - 1) * pagesize + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="id" label="车队编号">

        </el-table-column>
        <el-table-column prop="name" label="车队名称">

        </el-table-column>
        <!--        <el-table-column prop="agencyId" label="所属机构">-->

        <!--        </el-table-column>-->
        <el-table-column prop="manager" label="负责人">

        </el-table-column>
        <el-table-column prop="managerphone" label="负责人联系方式">

        </el-table-column>
        <el-table-column prop="fleetNumber" label="车辆总数">

        </el-table-column>
        <el-table-column prop="driverNumber" label="司机总数">

        </el-table-column>
        <el-table-column fixed="right" label="车辆详情" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="medium " @click="truckLieBiao(scope.row)">车辆列表</el-button>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="司机详情" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="medium " @click="driverLieBiao(scope.row)">司机列表</el-button>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button type="text" size="medium " @click="openUpdFleet(scope.row)">编辑</el-button>
            <el-button type="text" style="color:red;" size="medium" @click="remFleet(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center">
        <br>
        <el-pagination
          @size-change="setSize"
          @current-change="setPage"
          :current-page="pagenum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagesum">
        </el-pagination>
      </div>
    </el-card>

    <el-dialog
      title="添加车队"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <div>
        <el-form ref="addFleetData" :model="addFleetData" label-width="120px">
          <el-form-item label="* 车队名称">
            <el-input v-model="addFleetData.name">
            </el-input>
          </el-form-item>
          <el-form-item label="* 负责人">
            <el-select v-model="addFleetData.manager" clearable placeholder="请选择">
              <el-option
                v-for="item in fleetPrincipal"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <!--          <el-form-item label="* 所属机构">-->
          <!--            <el-tree-->
          <!--              :data="tree"-->
          <!--              :props="props"-->
          <!--              :check-strictly="true"-->
          <!--              show-checkbox-->
          <!--              @check-change="handleCheckChange">-->
          <!--            </el-tree>-->
          <!--          </el-form-item>-->
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="danger" @click="addFleet()">添 加</el-button>
      </span>
    </el-dialog>


    <el-dialog
      title="编辑车队"
      :visible.sync="dialogVisible1"
      width="30%"
      :before-close="handleClose1">
      <div>
        <el-form ref="addFleetData" :model="updFleetData" label-width="120px">
          <el-form-item label="* 车队名称">
            <el-input v-model="updFleetData.name">
            </el-input>
          </el-form-item>
          <el-form-item label="* 负责人">
            <el-select v-model="updFleetData.manager" clearable placeholder="请选择">
              <el-option
                v-for="item in fleetPrincipal"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="danger" @click="updFleet()">修改</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import method from '../../../api/logisticsmanagement/transitcenter/truckFleetManagement'
import method2 from "../../../api/logisticsmanagement/organization/organizationScope";


export default {
  name: "carTeam",
  data() {
    return {
      //  当前页
      pagenum: 1,
      //  一页显示几条数据
      pagesize: 5,
      //  总页数
      pagesum: 0,
      //  查询出来的数据
      tableData: [],
      //  搜索条件
      PdFleet: {
        name: "",//  车队名称
        id: ""//  车队ID
      },
      //  表格加载状态
      loading: false,
      //  添加车队的对话框开启状态
      dialogVisible: false,
      //  要添加的车队数据
      addFleetData: {
        name: "",//  车队名称
        manager: ""//  负责人ID
      },
      //  所有负责人数据
      fleetPrincipal: {},
      //  修改车队的数据
      updFleetData: {
        name: "",//  车队名称
        manager: ""//  负责人ID
      },
      //  修改车队模态框的开启状态
      dialogVisible1: false,
      // //  机构数据
      // props: {
      //   id: '',
      //   label: 'name',
      //   children: 'orgTreeDtoList'
      // },
      // tree: []
    }
  },
  methods: {
    //  跳转司机列表组件
    driverLieBiao(val) {

      this.$router.push({path: 'driverliebiao', query: {fleetid: val.id}})
    },
    //  跳转车辆列表组件
    truckLieBiao(val) {
      this.$router.push({path: 'truckliebiao', query: {fleetid: val.id}})
    },
    //  取消添加对话框
    handleClose1(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    //  打开编辑车队的对话框
    openUpdFleet(val) {
      this.updFleetData = {
        id: val.id,
        name: val.name,
        manager: val.managerId
      }
      this.dialogVisible1 = true
    },
    //  确认修改
    updFleet() {
      if (this.updFleetData.name == null || this.updFleetData.name == "") {
        this.$notify({
          title: '警告',
          message: "请输入车队名称",
          type: 'warning'
        })
        return
      }
      if (this.updFleetData.manager == null || this.updFleetData.manager == "") {
        this.$notify({
          title: '警告',
          message: "请选择负责人",
          type: 'warning'
        })
        return
      }
      this.dialogVisible1 = false
      method.updFleet(this.updFleetData).then(({data}) => {
        if (data.code == 200) {
          this.$notify({
            title: '成功',
            message: '车队修改成功!',
            type: 'success'
          });
        }
        this.pageTruckFleet()
      })
    },
    //  清除搜索框
    reset(formName) {
      this.$refs[formName].resetFields();
    },
    //  搜索按钮
    pageTruckDriver() {
      this.pageTruckFleet()
    },
    //  条件分页查询车队及相关数据
    pageTruckFleet() {
      this.loading = true
      method.pageTruckFleet(this.pagenum, this.pagesize, this.PdFleet).then(({data}) => {

        if (data.code == 200) {
          this.tableData = data.data.records
          this.pagesum = data.data.total
          this.loading = false
        }
      })
    },
    //  查询所有负责人
    findFleetPrincipal() {
      method.selFleetPrincipal().then(({data}) => {
        if (data.code == 200) {
          this.fleetPrincipal = data.data.data
        }
      })
    },
    //  修改总页数
    setPage(val) {

      this.pagenum = val
      this.pageTruckDriver()

    },
    //  设置一页显示多少数据
    setSize(val) {

      this.pagesize = val
      this.pageTruckDriver()
    },
    //  删除车队
    remFleet(val) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        method.delfleet(val.id).then(({data}) => {

          if (data.code == 200) {
            this.$notify({
              title: '成功',
              message: '车队删除成功!',
              type: 'success'
            });
            this.pageTruckFleet()
          }

          if (data.code == 201) {

            this.$notify({
              title: '警告',
              message: data.message,
              type: 'warning'
            })
            return
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      })
    },
    //  打开添加车队的对话框
    openAddFleet() {
      // this.tree = []
      // this.getTree()
      this.addFleetData = {}
      this.dialogVisible = true
    },
    //  取消添加对话框
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    //  确认添加车队
    addFleet() {
      if (this.addFleetData.name == "" || this.addFleetData.name == null) {
        this.$notify({
          title: '警告',
          message: '请输入添加的车队名称',
          type: 'warning'
        });
        return;
      }
      if (this.addFleetData.manager == "" || this.addFleetData.manager == null) {
        this.$notify({
          title: '警告',
          message: '请选择负责人',
          type: 'warning'
        });
        return;
      }
      this.dialogVisible = false
      method.insFleet(this.addFleetData).then(({data}) => {
        if (data.code == 200) {
          this.$notify({
            title: '成功',
            message: '车队添加成功!',
            type: 'success'
          });
        }
        this.pageTruckFleet()
      })
    },
//     handleCheckChange(data, checked, indeterminate) {
//       if(checked){
//         this.addObj = data.id
//       }
//       console.log(data.id)
//       menu.getMenuAll(data.id).then(({data})=>{
//         console.log(data.data)
//       })
//       menu.getMenuButtons(data.id).then(({data})=>{
//         console.log(data.data)
//       })
//     },
//     // 获取机构树
//     getTree(){
//       method2.queryCoreOrgAllInfo({}).then(({data})=>{
//         this.dg (data.data)
//         this.tree = data.data
//       })
//     },
// // 递归设置机构名称
//     dg (data) {
//       if(data!=null){
//         for (var i = 0; i < data.length; i++) {
//           if (data[i].orgTreeDtoList.length > 0) {
//             this.dg(data[i].orgTreeDtoList)
//           }else {
//             delete data[i].orgTreeDtoList
//           }
//           this.$set(data[i], 'id', data[i].pdCoreOrg.id)
//           this.$set(data[i], 'name', data[i].pdCoreOrg.name)
//         }
//       }
//     },
  },
  created() {
    this.pageTruckDriver()
    this.findFleetPrincipal()
  }

}
</script>

